<div class="details-content">
  <mat-card>
    <mat-card-content>
      <div *ngIf="uid && uid != userService.user.uid && user">
        <div class="avatar-center-div">
          <mat-icon *ngIf="!user.avatarUrl" class="avatar-icon"
                    svgIcon="default_avatar"></mat-icon>
          <img *ngIf="user.avatarUrl" [src]="user.avatarUrl" class="avatar-icon" alt=""/>
        </div>
        <p>Uid：{{user.uid}}</p>
        <p>名称：{{user.username}}</p>
        <p *ngIf="user.inviterId">邀请人ID：{{user.inviterId}}</p>
        <p>经验：{{user.exp}}</p>
        <div style="display: flex;align-items: center">
          <p>等级：{{userLevel}}</p>
          <mat-icon svgIcon="level" style="margin-left: 8px"></mat-icon>
        </div>
        <p>等级称号：{{configService.userConfig.levelList[userLevel].name}}</p>
        <p>性别：{{userSex}}</p>
        <p>上传量：{{user.uploaded | byte}}</p>
        <p>下载量：{{user.downloaded | byte}}</p>
        <p>分享率：{{user.uploaded | rate:userService.user.downloaded}}</p>
        <p>金币：{{user.gold}}</p>
        <p>砖石：{{user.diamond}}</p>
        <p>创建时间：{{user.created | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
        <p>更新时间：{{user.modify | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
      </div>
      <mat-tab-group *ngIf="!uid || uid == userService.user.uid">
        <mat-tab label="详情">
          <div class="avatar-center-div">
            <mat-icon *ngIf="!userService.user.avatarUrl" class="avatar-icon"
                      svgIcon="default_avatar"></mat-icon>
            <img *ngIf="userService.user.avatarUrl" [src]="userService.user.avatarUrl" class="avatar-icon" alt=""/>
          </div>
          <p>Uid：{{userService.user.uid}}</p>
          <p>注册IP：{{userService.user.ip}}</p>
          <p>名称：{{userService.user.username}}</p>
          <p>Passkey：{{userService.user.passkey}}</p>
          <p>邮箱：{{userService.user.email}}</p>
          <p *ngIf="userService.user.inviterId">邀请人ID：{{userService.user.inviterId}}</p>
          <p>经验：{{userService.user.exp}}</p>
          <div style="display: flex;align-items: center">
            <p>等级：{{userLevel}}</p>
            <mat-icon svgIcon="level" style="margin-left: 8px"></mat-icon>
          </div>
          <p>等级称号：{{configService.userConfig.levelList[userLevel].name}}</p>
          <p>性别：{{userSex}}</p>
          <p>上传量：{{userService.user.uploaded | byte}}</p>
          <p>下载量：{{userService.user.downloaded | byte}}</p>
          <p>分享率：{{userService.user.uploaded | rate:userService.user.downloaded}}</p>
          <p>金币：{{userService.user.gold}}</p>
          <p>砖石：{{userService.user.diamond}}</p>
          <p>创建时间：{{userService.user.created | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
          <p>更新时间：{{userService.user.modify | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
        </mat-tab>
        <mat-tab label="做种">
          这里是你做种的页面

          <mat-paginator [length]="0" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </mat-tab>
        <mat-tab label="下载">
          这里历史下载种子记录页面

          <mat-paginator [length]="0" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </mat-tab>
        <mat-tab label="完成">
          这里历史完成种子页面

          <mat-paginator [length]="0" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </mat-tab>
        <mat-tab label="未完成">
          这里历史未完成种子页面

          <mat-paginator [length]="0" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </mat-tab>
        <mat-tab label="H&R">
          这里历史H&R种子页面

          <mat-paginator [length]="0" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>

<div class="fab-content">
  <button mat-fab color="primary" matTooltip="上传新头像" matTooltipPosition="left" (click)="fabClick()">
    <mat-icon svgIcon="up_avatar"></mat-icon>
    <input id="select-avatar" (change)="selectedFileOnChanged($event)" type="file"
           accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" [hidden]="true">
  </button>
</div>
